import style from './style'
import React from 'react'
import cx from 'classnames'

export default class extends React.Component {

	static defaultProps = {
    onClick: () => {}
	}

	handleClick() {
		if (this.props.disabled) return
    this.props.onClick()
	}

	render() {
		const { small, simple, className, pair='', disabled, value, ...others } = this.props
		const [ l, r ] = pair.split('|')
		return (
      <span 
        className={cx({
          [style.root]: true,
          [style.active]: value,
          [style.disabled]: disabled,
          [style.simple]: simple,
          [style.small]: small,
          [className]: className
        })}
        onClick={::this.handleClick}
        {...others}
      >
				{
					l?
					<span className={style.left}>{ l }</span>
					: null
				}
				<small/>
				{
					r?
					<span className={style.right}>{ r }</span>
					: null
				}
			</span>
		)
	}
}
